import React, { Component } from 'react'
// 接收一个一般组件，然后给它加上路由组件的几个api
import { withRouter, NavLink } from 'react-router-dom'
import { Menu } from 'antd'

class Header extends Component {
  state = {
    current: 'about'
  }

  handleClick = (e) => {
    this.setState({ current: e.key })
  }

  componentDidMount() {
  }

  render() {
    const { current } = this.state
    return (
      <div>
        <Menu onClick={this.handleClick} selectedKeys={current} mode="horizontal">
          <Menu.Item key="about">
            <NavLink to="/about">About</NavLink>
          </Menu.Item>
          <Menu.Item key="home">
            <NavLink to="/home">Home</NavLink>
          </Menu.Item>
        </Menu>
      </div>
    )
  }
}

export default withRouter(Header)
